document.querySelector('.chat[data-chat=person2]').classList.add('active-chat');
document.querySelector('.person[data-chat=person2]').classList.add('active');

// 聊天列表
let friends = {
    list: document.querySelector('ul.people'), //左侧边栏
    all: document.querySelectorAll('.left .person'), //聊天列表成员
    name: ''
};
// 聊天对象
let chat = {
    container: document.querySelector('.container .right'),
    current: null,
    person: null,
    name: document.querySelector('.container .right .top .name')
};

// websocket对象
var socket;


friends.all.forEach(f => {
    f.addEventListener('mousedown', () => {
        f.classList.contains('active') || setAciveChat(f);
    });
});

function setAciveChat(f) {
    friends.list.querySelector('.active').classList.remove('active');
    f.classList.add('active');
    chat.current = chat.container.querySelector('.active-chat');
    chat.person = f.getAttribute('data-chat');
    chat.current.classList.remove('active-chat');
    chat.container.querySelector('[data-chat="' + chat.person + '"]').classList.add('active-chat');
    friends.name = f.querySelector('.name').innerText;
    chat.name.innerHTML = friends.name;
}

/**
 * 发送信息
 */
function sendMsg() {
    var currMsg = document.getElementById("currInput").value;
    addMsgBody(0, currMsg);
    var currChatPerson = chat.container.querySelector('.active-chat').getAttribute('data-chat');
    if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    } else {
        console.log('{"toUserId":"' + currChatPerson + '","contentText":"' + currMsg + '"}');
        socket.send('{"toUserId":"' + currChatPerson + '","contentText":"' + currMsg + '"}');
    }
}

/**添加消息体
 * @param {Object} a 接收方 or 发送方
 * @param {Object} b 消息
 */
function addMsgBody(a, b) {
    var currChatPerson = chat.container.querySelector('.active-chat').getAttribute('data-chat');
    //获取div
    var currDiv = document.getElementById("chat-" + currChatPerson);
    //添加civ ，存放指标名称
    var div2 = document.createElement("div");

    if (a == 0) { //发送方
        div2.setAttribute("class", "bubble me");
    } else { //接收方
        div2.setAttribute("class", "bubble you");
        currDiv = document.getElementById("chat-" + jQuery.parseJSON(b).fromUserId);
        b = jQuery.parseJSON(b).contentText;
    }
    div2.innerHTML = b;
    currDiv.appendChild(div2);
    document.getElementById("currInput").value = "";
}

document.onkeydown = function (e) {
    if (!e) {
        e = window.event;
    }
    if ((e.keyCode || e.which) == 13) {
        sendMsg();
    }
}


function openSocket() {
    if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    } else {
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //let socketUrl = "	https://xxx.xxx.com/webSocketServer/" + document.getElementById("logginUser").value;

        let socketUrl = "ws://localhost:8080/zhaopin/ws/liu"
        console.log(socketUrl);
        if (socket != null) {
            socket.close();
            socket = null;
        }
        socket = new WebSocket(socketUrl);
        //打开事件
        socket.onopen = function () {
            console.log("websocket已打开");
        };
        //获得消息事件
        socket.onmessage = function (msg) {
            console.log(msg.data);
            //发现消息进入    开始处理前端触发逻辑
            addMsgBody(1, msg.data);

        };
        //关闭事件
        socket.onclose = function () {
            console.log("websocket已关闭");
            openSocket();

        };
        //发生了错误事件
        socket.onerror = function () {
            console.log("websocket发生了错误");
        }
    }
}

// openSocket();
